<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>基本信息配置</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top: 24px;">
            <el-form class="user-search">
                <el-form-item>
                    <el-button size="small" type="primary" class="title" @click="submit()">保存</el-button>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input size="small" v-model="formData.telephone" placeholder="请输入联系电话"
                        style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="二维码图片">

                    <div class="upload-demo">
                        <el-upload action="" :http-request="mainImgUpload" :show-file-list="false"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div style="position:relative;margin-left: 24px;" v-if="formData.qrcode">
                            <img :src="formData.qrcode" class="avatar" />

                            <div class="deleUrl">
                                <el-button type="danger" icon="el-icon-delete" circle @click="delImageClick()">
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
import {
    addQrcodes, UpdateQrcodeByIds, selectQrcodeAlls,DeleteQrcodeByIds
} from '../../api/userMG'
import client from "@/utils/ossClient.js";
export default {
    data() {
        return {
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: "添加",
            listData: [],
            formData: {
                telephone: '',
                qrcode: ''
            },
            obj: {}
        }
    },
    created() {
        this.getdata()
    },
    methods: {
        delImageClick() {
            this.formData.qrcode = ''
        },
        submit() {
            
         
            if (this.obj) {
                //修改
                this.upJump()
            } else {
            
                //新增
                this.addJump()
            }
        },
        // 修改
        upJump() {
            this.loading = true;
         
            UpdateQrcodeByIds(
                {
                    telephone:this.formData.telephone,
                    id:this.obj.id,
                    qrcode:this.formData.qrcode,
                }
            ).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisible = false
                    this.$message({
                        type: "success",
                        message: res.msg,
                    });
                    this.getdata();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 添加
        addJump() {
            this.loading = true;

            addQrcodes(...this.formData).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisible = false
                    this.$message({
                        type: "success",
                        message: res.msg,
                    });
                    this.getdata();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 删除
        deleteJump(index, row) {
            this.$confirm("确定要删除吗?", "信息", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    DeleteJumpByIds({ id: row.id })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "已删除！",
                                });
                                this.getdata();
                            } else {
                                this.$message({
                                    type: "info",
                                    message: res.msg,
                                });
                            }
                        }).catch((err) => {
                            this.loading = false;
                            this.$message.error("删除失败，请稍后再试！");
                        });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        // 关闭编辑、增加弹出框
        closeDialog() {
            this.editFormVisible = false;
        },
        //自定义上传方法..
        mainImgUpload(file) {
            //判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["jpg", "jpeg", "webp", "png", "bmp"];
            if (names.indexOf(exname) < 0) {
                this.$message.error("不支持的格式!");
                return;
            }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        this.formData.qrcode = res.url;
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },
        // 获取数据方法
        getdata() {
            this.loading = true;
            selectQrcodeAlls().then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.obj = res.data.data[0];
                    if(this.obj){
                        this.formData.telephone=this.obj.telephone
                        this.formData.qrcode=this.obj.qrcode
                    }
                    return;
                }
                this.$message({
                    type: "info",
                    message: res.msg,
                });
            });
        },
    }
}
</script>

<style>
.user-search {
    margin-top: 20px;
}

.deleUrl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99px;
}


.upload-demo img {
    width: 160px;
    height: 140px;
}

.userRole {
    width: 100%;
}

.upload-demo {
    display: flex;
    flex-direction: row;
}

.upload-demo img {
    width: 140px;
    height: 140px;
}
</style>